<template>
  <div id="collect-page" class="collect-box">
    <div class="collect-title">{{$t('message.silder.collect')}}</div>
    <div class="collect-list">
      <mobileScroll :ops="scrollOps" v-if="fileList.length!=0"  :openPullDown="true" :openUpload="false" @refreshStart="handleRS">
        <div v-for="(item,index) in fileList" :key="index" class="collect-item" @click="openItem(item)">
          <div class="collect-item-icon">
            <svg class="icon" aria-hidden="true">
              <use v-bind:xlink:href="getIcon(item.type,item.nameSuffix)"></use>
            </svg>
          </div>
          <div class="collect-item-content">
            <div class="content">
              <div class="name">{{item.name}}</div>
              <div class="time">{{item.createTime}}</div>
            </div>
            <div class="collect-actions">
              <svg class="icon" aria-hidden="true" @click="docStar(item)">
                <use xlink:href="#keowledge-mobile-shoucang-xuanzhong-2"></use>
              </svg>
            </div>
          </div>
        </div>
      </mobileScroll>
      <jvs-empty imgSrc="@/assets/images/common/empty.png" v-if="fileList.length==0"></jvs-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { knowledgesCollect  } from '@/api/knowledge'
import { docStar } from "@/api/common";
import mobileScroll from './mobileScroll.vue'
import { getSessionStore,setSessionStore  } from '@/utils/store'
import { useRouter,useRoute } from "vue-router"
const router = useRouter();
const route = useRoute()
const emit = defineEmits([""])
const props = defineProps({

})

const  fileList = ref([])
const page = ref({
  size:20,
  current:1,
  total:0
})
const scrollOps = ref({
  click:true,
  observeDOM: true,
  probeType: 3,
  pullDownRefresh: {
    threshold: parseFloat(document.documentElement.style.fontSize) * 6.25,
    stop:  parseFloat(document.documentElement.style.fontSize) * 6.25
  },
  pullUpLoad: true,
  bounce:{
    top:false,
    bottom:false
  }
})

onMounted(()=>{
  init()
})

function handleRS(done){
  page.value = {
    current:1,
    total:0,
    size:20
  }
  init(done,true)
}
function docStar(item){
  docStar(item.id).then(res => {
    if (res.data && res.data.code == 0) {
      if(fileList.value.length==1){
        page.value.current --
        if(page.value.current<1){
          page.value.current = 1
        }
      }
      proxy.$mobileMessage({
        text:$t('message.message.actionSuccess'),
        type:'success'
      })
      init()
    }
  })
}
function init(done){
  let { size,current } = page.value
  const params = {
    size: size,
    current: current,
  }
  knowledgesCollect(params).then(res => {
    if(res.data && res.data.code == 0) {
      fileList.value = [...res.data.data.records] || []
      if(done) {
        done()
        proxy.$mobileToast({
          text:$t('message.message.refreshSuccess'),
          top:'3rem'
        })
      }
    }
  }).finally(res=>{
    if(done) done()
  })
}
function openItem(item){
  let routerList = getSessionStore({name:'mobileRouterList'}) || []
  let currentPath = route.fullPath
  if(routerList.indexOf(currentPath)!=-1){
    routerList.splice(routerList.indexOf(currentPath),1)
  }
  routerList.push(currentPath)
  setSessionStore({name:'mobileRouterList',content:routerList})
  router.push({
    path:'/mobile/viewfile',
    query:{
      knId:item.knowledgeId,
      type:item.type,
      docId:item.id,
      nameSuffix:item.nameSuffix||'',
      fileName:item.name||item.dcName
    }
  })
}
</script>
<style lang="scss" scoped>
.collect-box{
  padding: 16px 0rem 0rem;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  .collect-title{
    font-size: 1.125rem;
    font-weight: 400;
    color: #363B4C;
    margin-bottom: .75rem;
    padding: 0px .9375rem;
    @include SourceHanSansCN-Bold;
  }
  .collect-list{
    height: calc(100% - 2.5rem);
    // overflow-y: auto;
    .collect-item{
      display: flex;
      align-items: center;
      padding: 0px 0px 0px .9375rem;
      .collect-item-icon{
        height: 4.25rem;
        display: flex;
        align-items: center;
        .icon{
          height: 1.375rem;
          width: 1.375rem;
        }
      }
      .collect-item-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: .75rem;
        width: calc(100% - 2.125rem);
        padding-right: .9375rem;
        height: 4.25rem;
        border-bottom: .0625rem solid #eeeff0;
        .content{
          font-size: .9375rem;
          font-weight: 400;
          color: #363B4C;
          .name{
            @include SourceHanSansCN-Medium;
            margin-bottom: .25rem;
            max-width: 18rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .time{
            font-size: .875rem;
            font-weight: 400;
            color: #6f7588;
            @include SourceHanSansCN-Regular;
          }
        }
        .collect-actions{
          .icon{
            height: 1.375rem;
            width: 1.375rem;
          }
          img+img{
            margin-left: .75rem;
          }
        }
      }
    }
  }
}
</style>